<template>
  <view class="groupItem" v-if="detail" @click="goDetail">
    <view class="avatar">
      <image :src="setUrl(detail.logo_image)" mode="aspectFill" class="img"></image>
    </view>
    <view class="right">
      <view class="groupName">{{ detail.name }}</view>
      <view class="desc">社群号：{{ detail.id }} <text class="line">|</text> {{ detail.user.nickname }}</view>
    </view>
  </view>
</template>

<script setup>
import { setUrl } from '@/common';
  
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
})

function goDetail(){
  if(props.detail.is_expire){
    msg.value = '该社群已到期，请联系管理员';
    modal.value.open();
    return;
  }
  const url = props.detail.apply_status == 2 ? '/pages/group/yes-detail' : '/pages/group/not-detail'
  uni.navigateTo({
    url: `${url}?id=${props.detail.id}`
  });
}
</script>

<style lang="scss" scoped>
  .groupItem{
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 40rpx;
    .right{
      padding-left: 20rpx;
      .desc{
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        .line{
          padding: 0 10rpx;
        }
      }
      .groupName{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-bottom: 8rpx;
      }
    }
    .avatar{
      width: 100rpx;
      height: 100rpx;
      border-radius: 12rpx;
      overflow: hidden;
      font-size: 0;
    }
  }
</style>